<template>
  <div class="updataOut">
    <el-dialog
      title="修改客户数据"
      :visible="ShowDialog"
      @close="clickClose"
      :close-on-click-modal="false"
      top="5vh"
     >

     <el-form :model="addUserForm" :rules="addUserRules" ref="addUserForm" label-width="100px" status-icon>
            <el-form-item label="客户名称" prop="nickname">
            <el-input v-model.trim="addUserForm.nickname"></el-input>
            </el-form-item>

            <el-form-item label="联系电话" prop="contact">
            <el-input v-model.trim="addUserForm.contact"></el-input>
            </el-form-item>

            <el-form-item label="QQ" prop="qq">
            <el-input v-model.trim="addUserForm.qq"></el-input>
            </el-form-item>

            <el-form-item label="weixin" prop="weixin">
            <el-input v-model.trim="addUserForm.weixin"></el-input>
            </el-form-item>

            <el-form-item label="咨询专业" prop="zhuanye">
              <el-input placeholder="请输入内容" v-model.trim="addUserForm.zhuanye">
                  <el-select v-model="addUserForm.infoclass" slot="prepend" placeholder="请选择" class="mySelect">
                    <el-option  :value="item.classname" v-for="item in infoClassList" :key="item.id"></el-option>
                  </el-select>
              </el-input>
            </el-form-item>

            <el-form-item label="信息来源" prop="laiyuan">
            <el-input v-model.trim="addUserForm.laiyuan"></el-input>
            </el-form-item>

            <el-form-item label="所在地区" prop="dizhi">
            <el-input v-model.trim="addUserForm.dizhi"></el-input>
            </el-form-item>

            <el-form-item label="选择客服" prop="kefu">
            <el-select v-model="addUserForm.kefu" placeholder="请选择" multiple>
              <el-option :value="item.classname" v-for="item in kefuList" :key="item.id"></el-option>
            </el-select>
            </el-form-item>

            <el-form-item>
              <div style="padding-top:20px">
                <el-row :gutter="20">
                <el-col :span="8" >
                  <el-button style="width:100%;height:45px" type="primary" @click="clickUpdata">确认修改</el-button>
                 </el-col>
                <el-col :span="3">
                  <el-button style="width:100%;height:45px" @click="clickReact">重置</el-button>
                 </el-col>
                </el-row>
              </div>
            </el-form-item>
     </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getkefuInfo, getRowUser, updataRowUser } from '@/nextwork/nextworks'
import { dataRules } from '@/assets/js/validator'
export default {
  data () {
    return {
      ShowDialog: false,
      rowId: '',
      kefuList: [],
      infoClassList: [],
      addUserForm: {
        nickname: '',
        contact: '',
        weixin: '',
        qq: '',
        laiyuan: '',
        dizhi: '',
        kefu: [],
        zhuanye: '',
        infoclass: ''
      },
      addUserRules: {
        nickname: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        contact: [
          { validator: dataRules, trigger: 'blur' }
        ],
        qq: [
          { validator: dataRules, trigger: 'blur' }
        ],
        weixin: [
          { validator: dataRules, trigger: 'blur' }
        ],
        laiyuan: [
          { required: true, message: '请填写信息来源', trigger: 'blur' }
        ],
        zhuanye: [
          { required: true, message: '专业描述是必填的', trigger: 'blur' }
        ],
        kefu: [
          { type: 'array', required: true, message: '请选择客服', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    rowId (id) {
      this.getUserFun()
    }
  },
  mounted () {
    this.getKfInfo()
  },
  methods: {
    // 获取用户数据
    getUserFun () {
      getRowUser(this.rowId).then(res => {
        this.$refs.addUserForm.resetFields()
        this.addUserForm = res.data.results
        this.addUserForm.kefu = res.data.results.kefu.split('-')
        var userRes = JSON.stringify(res.data.results)
        window.sessionStorage.setItem('userRes', userRes)
      })
    },
    // 关闭弹窗
    clickClose () {
      this.ShowDialog = false
      window.sessionStorage.removeItem('userRes')
    },
    // 修改
    clickUpdata () {
      this.$refs.addUserForm.validate(valid => {
        if (valid) {
          // 调用修改数据接口
          updataRowUser(this.addUserForm).then(res => {
            this.$message.success('更新成功')
            this.ShowDialog = false
            this.$parent.getAllData()
            console.log(res)
          })
        }
      })
    },
    // 重置表单
    clickReact () {
      this.getUserFun()
    },
    getKfInfo () {
      getkefuInfo().then(res => {
        this.kefuList = res.data.kefu
        this.infoClassList = res.data.infoclass
      })
    }
  }
}
</script>

<style lang="less" scoped>
 .mySelect{
    width: 120px;
  }
</style>
